<template>
	<view class="uni-tab-bar">
		<!-- 
		<view style="display: flex; flex-direction: row; height: 400upx;">
			<view style="flex: 1; background-color: #007AFF;">dasda </view>
			<view style="flex: 2;  background-color:red;">dasd11 </view>
			<view style="flex: 3; background-color:black;">dasd22 </view>
		</view> -->

		<view style="border-bottom: 1px #c8c7cc solid;">
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
				<view v-for="(item,key) in tabBars" class="scroll-view-item_H" :class="tabIndex == key ? 'active':''" :key="key"
				 :data-current="key" @tap="tapTab">{{item.name}}</view>
			</scroll-view>
		</view>
		<swiper :current="tabIndex" class="swiper-box" :duration="300" @change="changeTab">
			<swiper-item v-for="(tab,index1) in newsitems" :key="index1">
				<scroll-view class="list" scroll-y @scrolltolower="loadMore(index1)">
					<block v-for="(newsitem,index2) in tab.data" :key="index2">
						<media-list :options="newsitem" @close="close(index1,index2)" @tap="goDetail(index2)"></media-list>
					</block>
					<view class="uni-tab-bar-loading">
						{{tab.loadingText}}
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import mediaList from '@/components/tab-nvue/mediaList.vue';
	let _self;
	const tpl = {
		data0: {
			"datetime": "40分钟前",
			"article_type": 0,
			"title": "uni-app行业峰会频频亮相，开发者反响热烈!",
			"source": "DCloud",
			"comment_count": 639
		},
		data1: {
			"datetime": "一天前",
			"article_type": 1,
			"title": "DCloud完成B2轮融资，uni-app震撼发布!",
			"image_url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90",
			"source": "DCloud",
			"comment_count": 11395
		},
		data2: {
			"datetime": "一天前",
			"article_type": 2,
			"title": "中国技术界小奇迹：HBuilder开发者突破200万",
			"image_url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90",
			"source": "DCloud",
			"comment_count": 11395
		},
		data3: {
			"article_type": 3,
			"image_list": [{
				"url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90",
				"width": 563,
				"height": 316
			}, {
				"url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90",
				"width": 641,
				"height": 360
			}, {
				"url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90",
				"width": 640,
				"height": 360
			}],
			"datetime": "5分钟前",
			"title": "uni-app 支持使用 npm 安装第三方包，生态更趋丰富",
			"source": "DCloud",
			"comment_count": 11
		},
		data4: {
			"datetime": "2小时前",
			"article_type": 4,
			"title": "uni-app 支持原生小程序自定义组件，更开放、更自由",
			"image_url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90",
			"source": "DCloud",
			"comment_count": 69
		}
	};
	export default {
		components: {
			mediaList
		},
		data() {
			return {
				srollLeft: 0,
				tabIndex: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				tabBars: [{
						name: "关注",
						id: "guanzhu"
					},
					{
						name: "推荐",
						id: "tuijian"
					}, {
						name: '体育',
						id: 'tiyu'
					}, {
						name: '热点',
						id: 'redian'
					}, {
						name: '财经',
						id: 'caijing'
					}, {
						name: '娱乐',
						id: 'yule'
					}, {
						name: '军事',
						id: 'junshi'
					}, {
						name: '历史',
						id: 'lishi'
					}, {
						name: '本地',
						id: 'bendi'
					}
				],
				newsitems: []
			}
		},
		onLoad() {
			this.newsitems = this.randomfn();
		},
		methods: {
			tapTab: function(e) {
				let tabIndex = e.target.dataset.current;
				this.tabIndex = tabIndex
			},
			scroll: function(e) {

				this.old.scrollTop = e.detail.scrollTop
			},
			changeTab(e) {
				let tabIndex = e.detail.current;
				if(this.newsitems[tabIndex].data.length === 0){
					this.addData(tabIndex);
				}
				
				this.tabIndex = tabIndex
				
			},
			close(index1, index2) {
				uni.showModal({
					content: '是否删除本条信息？',
					success: (res) => {
						if (res.confirm) {
							this.newsitems[index1].data.splice(index2, 1);
						}
					}
				})
			},
			loadMore(tabIndex) {
				setTimeout(() => {
					this.addData(tabIndex);
				}, 1200);
			},
			addData(tabIndex){
				if(this.newsitems[tabIndex].data.length == 30){
					this.newsitems[tabIndex].loadingText = '没有更多了';
					return;
				}
				
				for (let j = 1; j <= 10; j++) {
					this.newsitems[tabIndex].data.push(tpl['data' + Math.floor(Math.random() * 5)]);
				}
			},
			randomfn() {
				let ary = [];
				for (let i = 0, length = this.tabBars.length; i < length; i++) {
					let aryItem = {
						loadingText: '加载更多...',
						data: []
					};
					if (i < 1) {
						for (let j = 1; j <= 10; j++) {
							aryItem.data.push(tpl['data' + Math.floor(Math.random() * 5)]);
						}
					}
					ary.push(aryItem);
				}
				return ary;
			},
			goDetail(id){
				uni.navigateTo({
					url:"newInfo/newInfo?id=" + id
				})
			}
			
		}
	}
</script>

<style>
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item_H {
		display: inline-block;
		padding: 15upx 40upx;
		text-align: center;
		font-size: 34upx;
	}
	.uni-tab-bar-loading {
		text-align: center;
		font-size: 28upx;
		color: #999;
	}
	
	.active {
		color: #ffb402;
	}
</style>
